<template>
  <a-row type="flex" justify="center" align="middle" class="login-loginFront-header">
    <a-col :span="14">
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="2"></a-col>
        <a-col >
          <!-- 首页按钮  -->
          <fire-outlined @click="toIndex" class="icon-fire-outlined"/>
        </a-col>
        <a-col >
          <span class="title">{{title}}</span>
          <span class="version">{{' v' + version}}</span>
        </a-col>
        <a-col :span="16">
        </a-col>
      </a-row>
    </a-col>
    <a-col :span="10">
      <a-row type="flex" justify="center" align="middle">
        <a-col :span="10">
          <q-language-select width="100%"></q-language-select>
        </a-col>
        <!-- 版本更新说明 -->
        <a-col>
          <a-tooltip placement="bottom">
            <template #title>
              <span>{{$t('login.login.loginFront.versionDes')}}</span>
            </template>
            <bulb-outlined class="icon-bulb-outlined" @click="toVersionUpdate"/>
          </a-tooltip>
        </a-col>
        <a-col>
          <a-button type="text" class="sign-in-but" size="large" @click="toLogin">{{$t('login.login.loginFront.signIn')}}</a-button>
          <a-button ghost class="sign-up-but" size="large">{{$t('login.login.loginFront.signUp')}}</a-button>
        </a-col>
      </a-row>
    </a-col>
  </a-row>
</template>

<script>
  import { BulbOutlined, FireOutlined } from '@ant-design/icons-vue'
  import QLanguageSelect from '@/components/QLanguageSelect'
  import { useRouter } from 'vue-router'

  export default {
    name: 'LoginHeader',
    components: {
      QLanguageSelect,
      BulbOutlined,
      FireOutlined
    },
    data () {
      return {
        title: process.env.VUE_APP_TITLE,
        version: process.env.VUE_APP_VERSION
      }
    },
    setup () {
      const router = useRouter()

      const toVersionUpdate = function () {
        router.push({
          path: '/login/front/versionUpdate'
        })
      }

      const toIndex = function () {
        router.push({
          path: '/'
        })
      }

      const toLogin =  function () {
        router.push({
          path: '/login/page'
        })
      }

      return {
        toVersionUpdate,
        toIndex,
        toLogin
      }
    }
  }
</script>

<style lang="less" scoped>
  .title{
    font-size: 20px;
    font-weight: 900;
  }
  .version{
    font-size: 16px;
    font-weight: 800;
  }
  .icon-fire-outlined{
    font-size: 30px;
    font-weight: bold;
    cursor: pointer;
    &:hover{
      color: #99181b;
      font-size: 35px;
    }
  }
  .icon-bulb-outlined{
    margin-left: 20px;
    font-size: 20px;
    cursor: pointer;
    font-weight: bold;
    &:hover{
      color: rgb(255, 224, 118);
    }
  }
  .sign-in-but{
    font-weight: 600;
    border-radius: 10px;
    &:hover{
      background: rgba(0, 0, 0, 0);
      color: rgba(0, 0, 0, 0.5);
    }
  }
  .sign-up-but{
    font-weight: 600;
    border-radius: 10px;
    color: #FE7300;
    border-color: #FE7300;
    &:hover{
      background: rgba(0, 0, 0, 0);
      color: #f49e57;
      border-color: #f49e57;
    }
  }
</style>